import { Alert, AlertDescription } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import { Crown, Zap, Star } from 'lucide-react'
import { useState } from 'react'
import { PlanUpgradeDialog } from '@/components/PlanUpgradeDialog'

interface LimitWarningProps {
  currentCount: number
  limit: number
  feature: string
  planType: string
  userId: string
}

export function LimitWarning({ currentCount, limit, feature, planType, userId }: LimitWarningProps) {
  const [showUpgradeDialog, setShowUpgradeDialog] = useState(false)
  const percentage = limit === -1 ? 0 : (currentCount / limit) * 100
  
  // 无限制套餐不显示警告
  if (limit === -1) return null
  
  // 使用率低于 80% 不显示警告
  if (percentage < 80) return null
  
  const getIcon = () => {
    switch (planType) {
      case 'basic': return <Zap className="h-4 w-4" />
      case 'pro': return <Star className="h-4 w-4" />
      case 'enterprise': return <Crown className="h-4 w-4" />
      default: return <Crown className="h-4 w-4" />
    }
  }
  
  const getUpgradeText = () => {
    switch (planType) {
      case 'free': return '升级到基础版'
      case 'basic': return '升级到专业版'
      case 'pro': return '升级到企业版'
      default: return '立即升级'
    }
  }
  
  return (
    <>
      <Alert className={percentage >= 100 ? 'border-red-500 bg-red-50' : 'border-yellow-500 bg-yellow-50'}>
        {getIcon()}
        <AlertDescription className="flex items-center justify-between">
          <span>
            {percentage >= 100 ? (
              <>您的{feature}使用次数已用完</>
            ) : (
              <>您的{feature}还剩 {limit - currentCount} 次使用机会</>
            )}
          </span>
          <Button 
            variant="outline" 
            size="sm"
            onClick={() => setShowUpgradeDialog(true)}
            className="ml-2"
          >
            {getUpgradeText()}
          </Button>
        </AlertDescription>
      </Alert>
      
      <PlanUpgradeDialog 
        open={showUpgradeDialog}
        onOpenChange={setShowUpgradeDialog}
        currentPlan={planType}
        userId={userId}
      />
    </>
  )
}